<!--  -->
<template>
  <div style="width: 100%;height: 100%;">
    <el-upload action="" :class="{'upload-img-isOne':isOne}" ref="upload"
      :list-type="isOne ? 'picture' :'picture-card'" :file-list='fileList1' :http-request="uploadImageRequest"
      :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
      <slot></slot>
      <div v-if="isOne" slot="file" slot-scope="{file}">
        {{file.url}}
      </div>
    </el-upload>
    <!-- <MyexamplePopup :show="showImg" :data="dataimg" @cancel="cancelImg"></MyexamplePopup> -->
  </div>
</template>

<script>
  // import MyexamplePopup from '@/components/MyexamplePopup/MyexamplePopup'
  import {
    MessageBox
  } from 'element-ui'
  import {
    uploadImg
  } from '@/api/upload.js'
  export default {
    name: 'upload-img',
    // components: { MyexamplePopup },
    props: {
      fileList: {
        type: Array,
        default: function() {
          return []
        }
      },
      width: {
        type: [String, Number],
        required: true,
        default: 800
      },
      height: {
        type: [String, Number],
        default: null
      },
      shopType: {
        type: [String],
        default: 'more'
      },
      uploadChannel: {
        type: [String],
        default: 'COURSE'
      },
      oldImageUrl: {
        type: [String],
        default: ''
      }
    },
    data() {
      return {
        url: 'http://132.232.16.87/front/upload-image',
        showImg: false,
        dataimg: {},
        fileList1: this.fileList
      }
    },
    watch: {
      fileList(n) {
        this.fileList1 = this.fileList
      }
    },

    computed: {
      isOne() {
        if (this.shopType === 'more') {
          return false
        } else {
          return true
        }
      }
    },

    methods: {
      cancelImg() {
        this.showImg = false
      },
      // 文件列表移除文件时的钩子
      handleRemove(file, fileList) {
        this.fileList1 = fileList
        this.sync()
      },
      // 点击文件列表中已上传的文件时的钩子
      handlePictureCardPreview(file) {
        this.showImg = true
        this.dataimg.img = file.url
        this.dataimg.type = 1
      },
      // 自定义上传方法
      uploadImageRequest(params) {
        console.log(params)

        const file = params.file
        const fileType = file.type
        const isVideo = fileType.indexOf('video/mp4') !== -1
        const fileUrl = this.$refs.upload.uploadFiles[0].url
        const fileObj = {
          uploadChannel: this.uploadChannel,
          file
        }
        if (isVideo) {
          this.uploadFile(fileObj)
        } else {
          this.$notify.error({
            title: '提示',
            message: '只能上传视频MP4'
          })
        }
      },
      uploadFile(file) {
        console.log('11111')
        console.log(this.oldImageUrl)
        const loading = this.$loading({
          lock: true,
          text: '正在加载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        uploadImg(file)
          .then(res => {
            console.log(res)
            loading.close()
            if (res.data.code === 200) {
              this.$refs.upload.uploadFiles[
                this.$refs.upload.uploadFiles.length - 1
              ].url = res.data.data.url
              this.$refs.upload.uploadFiles[
                this.$refs.upload.uploadFiles.length - 1
              ].name = file.file.name
              console.log(this.isOne)
              if (this.isOne) {
                this.fileList1 = [...[], ...[this.$refs.upload.uploadFiles[
                  this.$refs.upload.uploadFiles.length - 1
                ]]]
                console.log(this.$refs.upload.uploadFiles)
                // this.fileList1 = this.$refs.upload.uploadFiles
                this.sync()
              } else {
                this.fileList1 = this.$refs.upload.uploadFiles
                this.sync()
              }
              console.log(this.fileList1)
            }
          })
          .catch(err => {
            loading.close()
            this.$refs.upload.uploadFiles.splice(this.$refs.upload.uploadFiles.length - 1, 1)
          })
      },
      // 通知
      sync() {
        if (this.isOne) {
          this.$emit('input', this.fileList1[0])
        } else {
          this.$emit('input', this.fileList1)
        }
      }
    },

    mounted() {}
  }
</script>
<style type="text/css">
  .el-upload {
    width: 100%;
  }
</style>
<style lang="scss">
  .upload-img-isOne {
    width: 100%;
    overflow: hidden;

    .el-upload-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: none !important;
    }
  }
</style>
